<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/bm/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/footer.css" media="all">
    <link rel="stylesheet" href="../static/bm/layer/theme/default/layer.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/tree.css" media="all">
    <!--<link rel="stylesheet" th:href="@{/static/org/css/org.css}" media="all"/>-->
    <style>
        .add-mess-child > div:nth-child(1) {
            width: 100px;
        }
    </style>
</head>

<body class="layui-layout-body">
<input type="hidden" id="id" th:value="${id}">
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="add-title pad25px"><span class="mr10px cursor"><img src="../static/bm/bmuserinfo/img/return_icon.png" class="return"></span><span>新增活动室</span></div>
    <div class="new-add-box bgWhite box-shadows border-radius4" style="bottom: 115px;">
        <div class="new-add-box-scroll">
            <div class="add-mess mb40px">
                <input id="addOrgId" type="hidden"/>
                <div class="add-mess-child mb20px">
                    <div>
                        <label><span class="red">*</span>活动室名称：</label>
                    </div>
                    <div class="add-mess-form">
                        <p><input type="text" placeholder="请输入名称" id="name" maxlength="20"></p>
                    </div>
                </div>
                <div class="add-mess-child mb20px">
                    <div>
                        <label><span class="red">*</span>活动室类型：</label>
                    </div>
                    <div class="add-mess-form add-mess-current overflow textCenter">
                        <span class="current mr20px" id="1" value="1">理发店</span>
                        <span id="2" value="2">缝纫店</span>
                    </div>
                </div>
                <!--<div class="add-mess-child mb20px">
                    <div>
                        <label><span class="red">*</span>所属区域：</label>
                    </div>
                    <div id="treeTwo" class="add-mess-form">
                        <p class="add-mess-form-tree"><input autocomplete="off" id="selectParentOrg" type="text" placeholder="请输入" class="form-input"></p>
                        <div class="tree-con-box">

                        </div>
                    </div>
                </div>-->
                <div id="treeThree" class="add-mess-child mb20px">
                    <div>
                        <label><span class="red">*</span>服务范围：</label>
                    </div>
                    <div>
                        <div class="tree-con-box layui-form border1px" style="position: static; height: 300px; left: 100px; width: 400px; box-shadow: none;">
                        </div>
                    </div>
                </div>
                <div class="add-mess-child mb20px">
                    <div>
                        <label><span class="red">*</span>设备号：</label>
                    </div>
                    <div class="add-mess-form">
                        <p>
                            <select class="form-input" id="cardId">

                            </select>
                        </p>
                    </div>
                </div>
                <div class="add-mess-child mb20px">
                    <div>
                        <label>活动室地址：</label>
                    </div>
                    <div class="add-mess-form">
                        <p><input type="text" placeholder="请输入地址" id="address" maxlength="50"></p>
                    </div>
                </div>
                <div class="add-mess-child mb20px">
                    <div>
                        <label>联系人：</label>
                    </div>
                    <div class="add-mess-form">
                        <p><input type="text" placeholder="请输入联系人" id="contacts" maxlength="20"></p>
                    </div>
                </div>
                <div class="add-mess-child mb20px">
                    <div>
                        <label>手机号：</label>
                    </div>
                    <div class="add-mess-form">
                        <p><input type="number" id="phone" oninput="if(value.length>5)value=value.slice(0,11)" placeholder="请输入手机号"></p>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<div class="layui-footer layui-footer-one">
    <div class="btn-con textCenter">
        <span class="btn-one cursor return">返&nbsp;回</span>
        <span class="btn-two cursor" id="save">提&nbsp;交</span>
    </div>
</div>
<script src="../static/bm/js/jquery-2.1.3.min.js" charset="utf-8"></script>
<script src="../static/bm/js/leftSidebar.js" charset="utf-8"></script>
<script src="../static/bm/layer/layer.js" charset="utf-8"></script>
<script src="../static/bm/bmuserinfo/js/treeTwo.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/bm/bmuserinfo/js/treeTwo.js" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/treeThree.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<script>

    var orgIds = [];

    $(function () {
        $('.add-mess-current span').click(function () {
            $(this).toggleClass('current');
        })


        $("#save").click(function () {
            save();
        });


        $(".return").click(function () {
            window.location.href = "../activity/toActivity";
        })

        //添加初始化
        addOrgInit();

        //加载设备号
        loadCard();

        loadData();

        //授权机构树初始化
        authOrgInit();
    });

    function loadCard() {
        $.ajax({
            url: "../activity/getCrads",
            type: "get",
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    var html = "<option value=\"\">请选择</option>"
                    if (data.data.length > 0) {
                        for (var i = 0; i < data.data.length; i++) {
                            html += "<option value='" + data.data[i].cardId + "'>" + data.data[i].cardId + "</option>"
                        }
                    } else {
                        html = "<option value=\"\">暂无终端设备</option>"
                    }
                    $("#cardId").html(html);
                }
            }
        })
    }

    function save() {
        var id = $("#id").val();
        var type = "";
        $(".add-mess-current").find("span").each(function () {
            if ($(this).hasClass("current")) {
                type += $(this).attr("value") + ",";
            }
        });
        // var orgId = $("#selectParentOrg").data("orgid");
        var name = $("#name").val();
        var address = $("#address").val();
        var contacts = $("#contacts").val();
        var phone = $("#phone").val();
        var cardId = $("#cardId").val();
        var authOrgs = $("#treeThree input[type=checkbox]:checked").map(function () {
            return this.id;
        }).get().join(",");

        if (isNull(name)) {
            layer.msg("名称不能为空")
            return;
        }

        if (isNull(type)) {
            layer.msg("类型不能为空")
            return;
        }

        if (isNull(authOrgs)) {
            layer.msg("请选择服务范围")
            return;
        }

        if (isNull(cardId)) {
            layer.msg("请选择设备")
            return;
        }

        if (!isNull(phone) && !isPhoneNumber(phone)) {
            layer.msg("手机号格式不正确")
            return;
        }
        var data = {
            type: type.slice(0, type.length - 1), address: address, contacts: contacts,
            phone: phone, name: name, id: id, orgId: authOrgs, cardId: cardId
        };
        $.ajax({
            url: "../activity/addActivity",
            type: "post",
            async: false,
            dataType: "json",
            data: data,
            success: function (result) {
                if (result.code == 200) {
                    layer.alert("保存成功", function () {
                        window.location.href = "../activity/toActivity";
                    })
                } else {
                    layer.msg(result.msg);
                }
            }
        })
    }

    //数据回显
    function loadData() {
        var id = $("#id").val();
        if (isNull(id)) {
            return;
        }
        var data = {id: id};
        $.ajax({
            url: "../activity/getActivityById",
            type: "get",
            async: false,
            dataType: "json",
            data: data,
            success: function (result) {
                if (result.code == 200) {
                    $("#name").val(result.data.name);
                    $("#address").val(result.data.address);
                    $("#contacts").val(result.data.contacts);
                    $("#phone").val(result.data.phone);
                    if (!isNull(result.data.cardId)) {
                        var str = "<option value=" + result.data.cardId + " selected>" + result.data.cardId + "</option>"
                        $("#cardId").append(str);
                    }
                    // $("#cardId").val(result.data.cardId);
                    if (!isNull(result.data.orgIds) && result.data.orgIds.length > 0) {
                        for (var i = 0; i < result.data.orgIds.length; i++) {
                            $("#" + result.data.orgIds[i]).prop("checked", true);
                        }
                        console.log(result.data.orgIds);
                        orgIds = result.data.orgIds
                    }

                    if (result.data.type == "1,2") {
                        $('.add-mess-current span').addClass("current")
                    } else if (result.data.type == "1") {
                        $("#1").addClass("current")
                        $("#2").removeClass("current")
                    } else if (result.data.type == "2") {
                        $("#2").addClass("current");
                        $("#1").removeClass("current");
                    }
                }
            }
        })
    }


    /**
     * 添加组织弹层初始化
     */
    function addOrgInit() {
        var data = {type: 3};
        $.ajax({
            type: "get",
            url: "../bmuserinfo/getOrganization",
            data: data,
            dataType: "json",
            success: function (data) {
                var str = "";
                $.each(data.data.children, function (index, ao) {
                    if (ao.isChildExist == '1' && data.data.children != null && data.data.children.length > 0) {
                        str += '<ul class="tree-one">';
                        $.each(ao.children, function (index, ao1) {
                            str += '<li>';
                            str += '<div class="tree-children">';
                            str += '<div>';
                            if (ao1.isChildExist == '1') {
                                str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao1.orgId + '">' + ao1.orgName + '</p>';
                            } else {
                                str += '<p style="margin-left:17px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao1.orgId + '">' + ao1.orgName + '</p>';
                            }
                            str += '</div>';
                            str += '</div>';
                            if (ao1.isChildExist == '1' && ao.children != null && ao.children.length > 0) {
                                str += '<ul class="tree-two">';
                                $.each(ao1.children, function (index, ao2) {
                                    str += '<li>';
                                    str += '<div class="tree-children">';
                                    str += '<div>';
                                    if (ao2.isChildExist == '1') {
                                        str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                        str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao2.orgId + '">' + ao2.orgName + '</p>';
                                    } else {
                                        str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao2.orgId + '">' + ao2.orgName + '</p>';
                                    }
                                    str += '</div>'
                                    str += '</div>';
                                    if (ao2.isChildExist == '1' && ao2.children != null && ao2.children.length > 0) {
                                        str += '<ul class="tree-three">';
                                        $.each(ao2.children, function (index, ao3) {
                                            str += '<li>';
                                            str += '<div class="tree-children">';
                                            str += '<div>';
                                            if (ao3.isChildExist == '1') {
                                                str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                                str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao3.orgId + '">' + ao3.orgName + '</p>';
                                            } else {
                                                str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao3.orgId + '">' + ao3.orgName + '</p>';
                                            }
                                            str += '</div>'
                                            str += '</div>';
                                            if (ao3.isChildExist == '1' && ao3.children != null && ao3.children.length > 0) {
                                                str += '<ul class="tree-four">';
                                                $.each(ao3.children, function (index, ao4) {
                                                    str += '<li>';
                                                    str += '<div class="tree-children">';
                                                    str += '<div>';
                                                    str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao4.orgId + '">' + ao4.orgName + '</p>';
                                                    str += '</div>'
                                                    str += '</div>';
                                                    str += '</li>';
                                                })
                                                str += '</ul>'
                                            }
                                            str += '</li>';
                                        })
                                        str += '</ul>';
                                    }
                                    str += '</li>';
                                })
                                str += '</ul>';
                            }
                            str += '</li>';
                        });
                        str += '</ul>';
                    }
                    str += '';

                });
                $("#treeTwo .tree-con-box").html(str);
                $("#treeTwo .tree-con-box").hide();
                //选择机构数点击功能初始化
                treeTwoInit();
            }
        })
    }

    /**
     * 添加选择机构-机构
     */
    function addOrgSelect(obj) {
        var name = $(obj).html();
        var orgId = $(obj).data("orgid");
        if (orgId == 10) {
            name = "/";
        }
        $("#selectParentOrg").val(name);
        $("#selectParentOrg").data("orgid", orgId);
        $('#treeTwo .tree-con-box').hide();
    }

    /**判断是否是手机号**/
    function isPhoneNumber(tel) {
        var reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
        return reg.test(tel);
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


    /**
     * 授权机构树初始化
     */
    function authOrgInit() {
        var userNo = '[[${userNo}]]';
        var data = {type: 3};
        $.ajax({
            type: "get",
            url: basePath + "/bmuserinfo/getOrganization",
            dataType: "json",
            data: data,
            success: function (data) {
                var str = "";
                var authType1 = 0;
                var authType2 = 0;
                var authType3 = 0;
                var authType4 = 0;
                var authType5 = 0;
                $.each(data.data.children, function (index, ao) {
                    if (ao.isChildExist == '1' && data.data.children.length > 0) {
                        str += '<ul class="tree-one">';
                        $.each(ao.children, function (index, ao1) {
                            str += '<li>';
                            str += '<div class="tree-children">';
                            str += '<div>';
                            if (!isNull(orgIds) && orgIds.length > 0) {
                                var number = orgIds.indexOf(String(ao1.orgId));
                                if (number > -1) {
                                    authType1 = 1
                                } else {
                                    authType1 = 0
                                }
                            }
                            str += '<p class="mr5px"><input lay-filter="switchTest" type="checkbox" ' + (authType1 == 0 ? ' ' : checked = "checked") + '  data-state="0" data-parentorgid="' + ao1.parentOrgId + '" id="' + ao1.orgId + '" name="" lay-skin="primary"></p>';
                            str += ao1.isChildExist == '1' ? '<p class="tree-arrow cursor"><img src="' + basePath + '/static/user/img/icon_select_down.png"></p><p>' + ao1.orgName + '</p>' : '<p style="margin-left: 8px;margin-right: 6px;">' + ao1.orgName + '</p>';
                            str += '</div>';
                            str += '</div>';
                            if (ao1.isChildExist == '1' && ao.children.length > 0) {
                                str += '<ul class="tree-two">';
                                $.each(ao1.children, function (index, ao2) {
                                    str += '<li>';
                                    str += '<div class="tree-children">';
                                    str += '<div>';
                                    if (!isNull(orgIds) && orgIds.length > 0) {
                                        var number = orgIds.indexOf(String(ao2.orgId));
                                        if (number > -1) {
                                            authType2 = 1
                                        } else {
                                            authType2 = 0
                                        }
                                    }
                                    str += '<p class="mr5px"><input lay-filter="switchTest" type="checkbox" ' + (authType2 == 0 ? ' ' : checked = "checked") + ' data-state="0" data-parentorgid="' + ao2.parentOrgId + '" id="' + ao2.orgId + '" name="" lay-skin="primary"></p>';
                                    str += ao2.isChildExist == '1' ? '<p class="tree-arrow cursor"><img src="' + basePath + '/static/user/img/icon_select_down.png"></p><p>' + ao2.orgName + '</p>' : '<p style="margin-left: 8px;margin-right: 6px;">' + ao2.orgName + '</p>';
                                    str += '</div>'
                                    str += '</div>';
                                    if (ao2.isChildExist == '1' && ao1.children.length > 0) {
                                        str += '<ul class="tree-three">';
                                        $.each(ao2.children, function (index, ao3) {
                                            str += '<li>';
                                            str += '<div class="tree-children">';
                                            str += '<div>';
                                            if (!isNull(orgIds) && orgIds.length > 0) {
                                                var number = orgIds.indexOf(String(ao3.orgId));
                                                if (number > -1) {
                                                    authType3 = 1
                                                } else {
                                                    authType3 = 0
                                                }
                                            }
                                            str += '<p class="mr5px"><input lay-filter="switchTest" type="checkbox" ' + (authType3 == 0 ? ' ' : checked = "checked") + ' data-state="0" data-parentorgid="' + ao3.parentOrgId + '" id="' + ao3.orgId + '" name="" lay-skin="primary"></p>';
                                            str += ao3.isChildExist == '1' ? '<p class="tree-arrow cursor"><img src="' + basePath + '/static/user/img/icon_select_down.png"></p><p>' + ao3.orgName + '</p>' : '<p style="margin-left: 8px;margin-right: 6px;">' + ao3.orgName + '</p>';
                                            str += '</div>';
                                            str += '</div>';
                                            if (ao3.isChildExist == '1' && ao2.children.length > 0) {
                                                str += '<ul class="tree-four">';
                                                $.each(ao3.children, function (index, ao4) {
                                                    str += '<li>';
                                                    str += '<div class="tree-children">';
                                                    str += '<div>';
                                                    if (!isNull(orgIds) && orgIds.length > 0) {
                                                        var number = orgIds.indexOf(String(ao4.orgId));
                                                        if (number > -1) {
                                                            authType4 = 1
                                                        } else {
                                                            authType4 = 0
                                                        }
                                                    }
                                                    str += '<p class="mr5px"><input lay-filter="switchTest" type="checkbox" ' + (authType4 == 0 ? ' ' : checked = "checked") + ' data-state="0" data-parentorgid="' + ao4.parentOrgId + '" id="' + ao4.orgId + '" name="" lay-skin="primary"></p>';
                                                    str += ao4.isChildExist == '1' ? '<p class="tree-arrow cursor"><img src="' + basePath + '/static/user/img/icon_select_down.png"></p><p>' + ao4.orgName + '</p>' : '<p style="margin-left: 8px;margin-right: 6px;">' + ao4.orgName + '</p>';
                                                    str += '</div>';
                                                    str += '</div>';
                                                    if (ao4.isChildExist == '1' && ao3.children.length > 0) {
                                                        str += '<ul class="tree-five">';
                                                        $.each(ao4.children, function (index, ao5) {
                                                            str += '<li>';
                                                            str += '<div class="tree-children">';
                                                            str += '<div>';
                                                            if (!isNull(orgIds) && orgIds.length > 0) {
                                                                var number = orgIds.indexOf(String(ao5.orgId));
                                                                if (number > -1) {
                                                                    authType5 = 1
                                                                } else {
                                                                    authType5 = 0
                                                                }
                                                            }
                                                            str += '<p class="mr5px"><input lay-filter="switchTest" type="checkbox" ' + (authType5 == 0 ? ' ' : checked = "checked") + ' data-state="0" data-parentorgid="' + ao5.parentOrgId + '" id="' + ao5.orgId + '" name="" lay-skin="primary"></p>';
                                                            str += ao5.isChildExist == '1' ? '<p class="tree-arrow cursor"><img src="' + basePath + '/static/user/img/icon_select_down.png"></p><p>' + ao5.orgName + '</p>' : '<p style="margin-left: 8px;margin-right: 6px;">' + ao5.orgName + '</p>';
                                                            str += '</div>';
                                                            str += '</div>';
                                                            str += '</li>';
                                                        })
                                                        str += '</ul>';
                                                    }
                                                    str += '</li>';
                                                })
                                                str += '</ul>'
                                            }
                                            str += '</li>';
                                        })
                                        str += '</ul>';
                                    }
                                    str += '</li>';
                                })
                                str += '</ul>';
                            }
                            str += '</li>';
                        });
                        str += '</ul>';
                    }
                    str += '';
                    $("#treeThree .tree-con-box").html(str);
                    //授权机构树点击功能初始化
                    treeThreeInit();
                });
            }
        })
    }
</script>
</body>

</html>
